<template>
	<view class="container" :style="'background: url('+url+');background-size: 100% 686rpx;'">
		<!-- 返回按钮 -->
		<view @click="handleBack()" class="back-button flex-ccc" :style="{top: backTop + 'px', left: '24rpx', zIndex: 3}">
			<u-icon name="arrow-left" color="#2E2B2B" size="36"></u-icon>
		</view>
	
		<view></view>
		<view class="bg-open-img">
			<uni-swiper-dot @clickItem="handleDotClick" :info="winningList" :current="currentSwiper" mode="round">
			    <swiper :current="currentSwiper" :indicator-dots="false" :autoplay="false"
					:style="{ height: '730rpx' }" previous-margin="100rpx" next-margin="100rpx" class="swiper">
			        <swiper-item v-for="(item ,index) in winningList" :key="index">
			            <view class="swiper-border">
			            	<view class="photo-box">
			            		<image :src="item.product_image"></image>
			            	</view>
			            	
			            	<view class="info-wrap">
								<!-- <image :src="item.tab_big_image"></image> -->
			            		<view class="name">{{item.product_name}}</view>
			            	</view>
			            </view>
			        </swiper-item>
			    </swiper>
			</uni-swiper-dot>
			<view v-if="winningList.length>1" class="scroll-look">
				<u-icon name="arrow-left" color="#2F2E3B"></u-icon>
				<view>左右滑动查看</view>
				<u-icon name="arrow-right" color="#2F2E3B"></u-icon>
			</view>

			
		</view>

		<view class="bottom-box" v-if="query.test == 0">
			<view class="look-info">已为您存放至藏品<text @click="router('/pages/cabinet/list')">前往藏品 ></text></view>
			<view class="already">
				<view @click="handleBack()" class="right-border">
					<!-- <u-image src="/static/box/draw.png" width="64" height="64"></u-image> -->
					<view>继续抽盒</view>
				</view>
			</view>
			<!-- <view class="tips">
				<view>抽中商品存储在藏品, 在藏品可对商品进行操作</view>
			</view> -->
		</view>
		
		<!-- <view class="bottom-box" v-else>
			<view class="free-title">试玩支付¥{{orderInfo.pay_money || 0}}, <text>还需支付¥{{orderInfo.diff_price || 0}}获得此商品</text></view>
			<view class="wx-pay" @click="payDiffPrice()">
				<u-image src="/static/box/continue.png" width="64" height="64"></u-image>
				<view>继续支付</view>
			</view>
			<view class="tips">
				<view>本页面仅做试玩体验效果展示,需要补差价获得商品</view>
			</view>
		</view> -->
		
		<!-- 试玩补差价成功提示 -->
		<u-modal @confirm="showPayDiffSuccess=false" v-model="showPayDiffSuccess" title="支付成功"
			:title-style="titleStyle" :content-style="contentStyle" z-index="10080"
			:cancel-style="cancelStyle" :confirm-style="confirmStyle"
			content="盲盒已为您放入藏品中!" confirm-text="确定"></u-modal>
		
		
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from "vuex"
	
	export default {
		data() {
			return {
				backTop: uni.getSystemInfoSync().statusBarHeight+5,
				query: {},
				winningList:[],
				orderInfo: {},
				
				// 试玩
				showPayDiffSuccess: false,
				url:this.$net.url+'/addons/lingchi_guess_box/public/wxapp/zs.png'
			};
		},
		computed: {
			...mapGetters(['userInfo']),
			titleStyle() {
				return {
					fontSize: '36rpx',
					color: '#000000',
				}
			},
			contentStyle() {
				return {
					fontSize: '32rpx',
					color: '#666',
				}
			},
			cancelStyle() {
				return {
					fontSize: '34rpx',
					color: '#000000',
					borderTop: '2rpx solid rgba(0, 0, 0, 0.1)',
				}
			},
			confirmStyle() {
				return {
					fontSize: '34rpx',
					color: '#576B95',
					borderLeft: '2rpx solid rgba(0, 0, 0, 0.1)',
					borderTop: '2rpx solid rgba(0, 0, 0, 0.1)',
				}
			},
		},
		onLoad(query) {
			this.query = query
			if(query.order_main_id>0) this.getList()
			if(query.test>0) this.getOrder()
		},
		methods:{
			...mapActions(['setUser']),
			handleBack() {
				uni.redirectTo({
				    url: '/pages/box/detail?blind_box_id=' + this.query.blind_box_id
				});
			},
			// 微信支付试玩差价
			payDiffPrice() {
				let _this = this;
				wx.requestPayment({
					..._this.orderInfo.payment,
					success(res) {
						
						_this.showPayDiffSuccess = true
						_this.getMine()
					},
					fail(err) {
						
						_this.$refs.uToast.show({
							title: '支付失败！',
							type: 'error',
						})
					},
					complete(res) {
						
					}
				})
			},
			getMine() {
				this.$net.req('/user/getMine', {}).then(res => {
					if (res.code === 200) {
						
						this.setUser(res.data)
					}
				})
			},
			// 获取奖品列表
			getList() {
				this.$net.req('/create_order/getOrderBlindBox', {order_main_id: this.query.order_main_id}, false).then(res => {
					if (res.code === 200) {
						this.winningList = res.data
					}
				})
			},
			// 获取试玩补差价信息
			getOrder() {
				this.$net.req('/create_order/diffPrice', {order_main_id: this.query.order_main_id}, false).then(res => {
					if (res.code === 200) {
						this.orderInfo = res.data
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.container{
		// background: linear-gradient(180deg, #D9EDFF 0%, #E9E4FE 52%, #FAECF1 100%);
		min-height: 100vh;
		width: 100%;
		
		.bg-open-img{
			width: 100%;
			height: 686rpx;
			// background-image: url(@/static/box/bg-backs.png);
			// background-size: 100% 686rpx;
			position: absolute;
			// margin-top: 145rpx;
			margin-top: 20%;
			
			.swiper-border{
				width: 424rpx;
				height: 558rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				margin: 200rpx auto 0;
				.photo-box {
					width: 424rpx;
					height: 424rpx;
					border-radius: 16rpx;
					// border: 8rpx solid #A998FF;
					
					image{
						width: 100%;
						height: 100%;
						border-radius: 16rpx;
					}
				}
				.info-wrap {
					margin: 16rpx 28rpx 0;
					text-align: center;
					image{
						width: 360rpx;
						height: 74rpx;
					}
					
					.name {
						height: 96rpx;
						font-size: 32rpx;
						font-weight: bold;
						color: #333333;
						line-height: 48rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}
				}
			}
		}
		.scroll-look{
			margin-top: 32rpx;
			display: flex;
			justify-content: center;
			font-size: 24rpx;
			font-family: HarmonyOS_Sans_SC;
			color: #2F2E3B;
		}
		
		.bottom-box{
			width: 750rpx;
			height: 226rpx;
			background: #000000;
			box-shadow: 0px -12rpx 20rpx 0rpx rgba(0, 0, 0, 0.03);
			// border-radius: 32rpx 32rpx 0rpx 0rpx;
			position: fixed;
			bottom: 0;
			left: 0;
			
			.look-info{
				margin-top: 32rpx;
				text-align: center;
				font-size: 28rpx;
				font-family: HarmonyOS_Sans_SC;
				color: #d6d6d6;
				text{
					color: #ffffff;
					margin-left: 16rpx;
				}
			}
			
			.already{
				display: flex;
				margin: 48rpx 24rpx 32rpx;
				justify-content: space-between;
				.right-border{
					width: 100%;
					height: 90rpx;
					background: #DFC791;
					border-radius: 12rpx;
					font-weight: bold;
					// border: 2rpx solid #2F2E3B;
					padding: 24rpx 56rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					view:nth-child(2){
						font-size: 36rpx;
						font-family: HarmonyOS_Sans_SC_Medium;
						color: #2F2E3B;
						margin-left: 20rpx;
						white-space: nowrap;
					}
				}
			}
			.tips{
				// margin-top: 100rpx;
				text-align: center;
				font-size: 24rpx;
				font-family: HarmonyOS_Sans_SC;
				color: #999999;
				view{
					text-align: center;
				}
			}
			
			.free-title{
				margin-top: 32rpx;
				font-size: 28rpx;
				font-family: HarmonyOS_Sans_SC;
				text-align: center;
				color: #6A6976;
				text{
					color: #DFC791;
				}
			}
			
			.wx-pay{
				margin: 48rpx auto 32rpx;
				width: 622rpx;
				height: 112rpx;
				background: #DFC791;
				border-radius: 12rpx;
				border: 2rpx solid #2F2E3B;
				font-size: 36rpx;
				font-family: HarmonyOS_Sans_SC_Medium;
				color: #2F2E3B;
				display: flex;
				align-items: center;
				justify-content: center;
				view:nth-child(2){
					margin-left: 20rpx;
				}
			}
		}
	}
</style>
